<!doctype html>
<html class="no-js">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>{$system_name}</title>
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileColor" content="#0e90d2">
    <!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
    <!--
  <link rel="canonical" href="http://www.example.com/">
  -->
    <link rel="stylesheet" href="__PUBLIC__/assets/css/amazeui.min.css">
    <link rel="stylesheet" href="__PUBLIC__/assets/css/app.css">
    <!--<link rel="stylesheet" href="__PUBLIC__/assets/css/index.css">-->
    <!--必要样式-->
    <style>
        .item {
            height: 80px;
            padding: 10px 0;
            padding-left: 6%;
            border-bottom: 1px solid #DFDFDF
        }

        .item span {
            line-height: 22px;
            display: block;
        }

        .itemadd {
            padding: 15px 0 15px 6%;
        }

        .bb span {
            display: block;
            font-size: 12px;
            line-height: 17px;
            color: #333;
            margin-bottom: 5px;
        }

        .game-name {
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 36px;

        }

        .name {
            position: absolute;
            bottom: 0;
            color: #FFF;
            height: 36px;
            background: rgba(0, 0, 0, 0.5);
            font-size: 16px;
            width: 100%;
            line-height: 15px;;
            padding-left: 10px;
        }

        .baoming {
            line-height: 36px;

            float: right;
            width: 85px;
            background: #FFC500;
            text-align: center
        }
        .bmf{
            font-size: 12px;display: inline-block;line-height:20px;width: 100px;
        }
    </style>
</head>

<body>
<header data-am-widget="header" class="am-header am-header-default">
    <div class="am-header-left am-header-nav">
        <a href="__APP__/Home/Race/" class="">
            <img src="__PUBLIC__/assets/i/left.png" alt="" style="margin: 5px">
        </a>
    </div>
    <h1 class="am-header-title">
        <a href="#title-link" class="">
            官方赛事
        </a>
    </h1>
</header>

<div class="am-g">
    <div class="am-u-sm-12  am-padding-0" style="position: relative">
        <img src="__PUBLIC__/images/ring_bg2.png" width="100%" alt="">
        <div class="name">
            <span class="game-name">{$race.title}<span class="bmf">(报名费:{$race.integral}钻石)</span></span>
            <eq name="is_involved" value="1">
                <a href="__URL__/qrCode?race_id={$race.id}">
                <span class="baoming">已报名</span>
                </a>
                <else/>

                <switch name="race.status">
                    <case value="0"><span class="baoming">报名未开始</span></case>
                    <case value="1"><span class="baoming" id="apply_btn">我要报名</span></case>
                    <case value="2"><span class="baoming">报名截止</span></case>
                    <default/>
                    <span class="baoming">报名截止</span>
                </switch>
            </eq>

        </div>
    </div>
</div>


<div class="am-g">
    <div class="am-u-sm-6 item">
        <switch name="race.status">
            <case value="0">{$race.apply_start_time|date='m月d日H:i',###}报名</case>
            <case value="1"><span>{$race.game_start_time|date='m月d日H:i',###}开始</span>
                <span>距离报名时间还剩</span>
                <span id="time_left">{$time_left}</span></case>
            <case value="2"><span>{$race.game_start_time|date='m月d日H:i',###}开始</span>报名已经截止</case>
            <case value="3">比赛进行中</case>
            <case value="4">已结束</case>
        </switch>
    </div>
    <div class="am-u-sm-6 item" style="border-left: 1px solid #DFDFDF;">
        <span>参赛所需条件</span>
        <span>比赛模式：{$race.model_name}
        <span><img src="__PUBLIC__/assets/i/diamond.png" width="14"
                   alt=""
                   style="display: inline-block;margin-top: -3px"> {$race.integral}</span>
    </div>
    <div class="am-u-sm-6 item itemadd">
        <span>比赛奖励</span>
        <span>奖金池 {$race.reward_integral}<img src="__PUBLIC__/assets/i/diamond.png" width="14"
                            alt=""
                            style="display: inline-block;margin-top: -3px"></span>
    </div>
    <div class="am-u-sm-6 item itemadd" style="border-left: 1px solid #DFDFDF;">
        <span>已报名人数</span>
        <span id="involved">{$involved}<eq name="race.people_number" value="-1">
            人
            <else/>/{$race.people_number}
        </eq></span>
    </div>
</div>

<div class="am-g">
    <div class="am-u-sm-12 am-text-center">
        <span style="line-height: 30px;font-size: 15px;color: #000;">比赛说明</span>
    </div>
    <div class="am-u-sm-12 am-padding-horizontal-lg bb">
        {$race.description}
    </div>
    <notempty name="race.winner">
        <div class="am-u-sm-12 am-text-center">
            <span style="line-height: 30px;font-size: 15px;color: #000;">比赛结果</span>
        </div>
        <div class="am-u-sm-12">
            {$race.result}
        </div>
    </notempty>
</div>
<div class="am-modal am-modal-confirm" tabindex="-1" id="my-confirm">
    <div class="am-modal-dialog">
        <div class="am-modal-bd" id="hint_content">
        </div>
        <div class="am-modal-footer">
            <span class="am-modal-btn" data-am-modal-cancel>取消</span>
            <span class="am-modal-btn am-model-yes" style="color: #0096FF;" data-am-modal-confirm>确定</span>
        </div>
    </div>
</div>

<div class="am-modal am-modal-confirm" tabindex="-1" id="money_confirm">
    <div class="am-modal-dialog">
        <div class="am-modal-bd" style="color: #251D02;" id="money_content">
            对不起，您的钻石不足！
        </div>
        <div class="am-modal-footer">
            <span class="am-modal-btn" style="color: #333" data-am-modal-cancel>取消</span>
            <span class="am-modal-btn" data-am-modal-confirm>充值</span>
        </div>
    </div>
</div>

<!--[if (gte IE 9)|!(IE)]><!-->
<script src="__PUBLIC__/assets/js/jquery.min.js"></script>
<script src="__PUBLIC__/assets/js/angular.min.js"></script>
<script src="__PUBLIC__/assets/js/amazeui.min.js"></script>
<script src="__PUBLIC__/layer/layer.js"></script>
<script type="text/javascript">
    var  intDiff = 0;

    $(function () {
        var windowWidth = $(window).width()-95;
        var w =  $('.game-name').width();
        console.log(w);
        if(w>windowWidth){
            $('.game-name').width(windowWidth);
        }
        var time = '{$time}';
        if(time > 0){
            intDiff = time;
            timer(intDiff);
        }
    });

    function timer(intDiff) {
        window.setInterval(function () {
            var
                day = 0;
            hour = 0;
            minute = 0,
                second = 0;//时间默认值
            if (intDiff > 0) {
                day = Math.floor(intDiff / (60 * 60 * 24));
                hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
                minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
                second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
            }
            if (minute <= 9) minute = '0' + minute;
            if (second <= 9) second = '0' + second;
            var timeStr = '';
            if(day > 0){
                timeStr +=day +'天 ';
            }
            if(hour >0){
                timeStr +=hour +':';
            }
            if(minute >0){
                timeStr +=minute +':';
            }else{
                timeStr +='00:';
            }
            if(second >0){
                timeStr +=second;
            }else{
                timeStr +='00';
            }
            $('#time_left').html(timeStr);
            intDiff--;
            if(intDiff == 0){
                $('#contactCode').hide();
            }
        }, 1000);
    }

    $(function () {
        $('#apply_btn').click(function(){
            var integral = '{$race.integral}';
            $('#hint_content').html('该场赛事报名费为'+integral+'钻石 是否决定报名？？');
            $('#my-confirm').modal({
                relatedTarget: this,
                // 确定
                onConfirm: function (options) {
                    var id = '{$race.id}';
                    $.ajax({
                        url:"__APP__/Home/Race/apply",
                        type:"post",
                        dataType: "json",
                        data:{race_id:id},
                        success: function(data){
                            console.info(data);
                            if(data.code != 1)
                                layer.msg(data.message);
                            if(data.success){
                                $('#apply_btn').html('已报名');
                                $('#apply_btn').unbind('click');
                                $('#involved').html(data.data.involved+'人');
                                window.location.href='__URL__/qrCode?race_id={$race.id}';
                            }else{
                                if(data.code == 1){
                                    //钻石不足
                                    $('#money_content').empty().html(data.message);
                                    $('#money_confirm').modal({
                                        relatedTarget: this,
                                        onConfirm: function(options) {
                                            //跳转到充值界面
                                            window.location.href='__APP__/Home/Recharge';
                                        },
                                        // closeOnConfirm: false,
                                        onCancel: function() {
                                        }
                                    });
                                }
                            }
                        },
                        error:function (data) {
                            layer.msg('服务器繁忙！',{type:1,time:1000},function(){
//                        location.reload();
                            });
                        }
                    });
                },
                // 取消
                onCancel: function () {
                }
            });
        })
    });
</script>
</body>
</html>

